;(function () {
  var propertyPortfolioVue = new Vue({
        el:'#propertyPortfolioVue',
        data(){
            return{
              jsPacDate:'',
              jsPadDate:'',
            }
        },
        methods: {
          selectMJ(){
            propertyPortfolio.propertyAreaComponentData(this.jsPacDate)
          },
          selectGS(){
            if (!$('#address-st').find('span').text() || $('#address-st').find('span').text() == '请选择') {
              hl.toast('请选择区域')
              return
            }
            var data = {
              date: this.jsPadDate,
              id: $('#address-st').find('span').attr('data-id'),
              area_type: $('#address-st').find('span').attr('data-type')
            }
            propertyPortfolio.propertyAreaDistributionData(data)
          }
        },
  })
  var ytChart ;
  var organizationChart ;
  var rentChart ;
  var ytParkingNum = 0;

  var propertyPortfolio = {
    init: function () {
      var self = this
      hlSelectUi()

      Highcharts.setOptions({
        lang: {
          numericSymbols: null     // 保留坐标轴的原始数值
        }
      });

      self.event()
      self.getOrganizationTypeData()
    },
    event: function () {
      var self = this

      // 自动显示为当前日期
      var now = self.lastDayDate(-1)
      // $('#js-pac-date').attr('value', now)
      propertyPortfolioVue.jsPacDate = now
      // $('#js-pad-date').attr('value', now)
      propertyPortfolioVue.jsPadDate = now
      self.propertyAreaComponentData(now)
      self.waitRentData()
      $('#address-st').on('click', 'li', function () {
        var data = {
          date:propertyPortfolioVue.jsPadDate,
          id: $(this).attr('data-id'),
          area_type: $(this).attr('data-type')
        }
        self.propertyAreaDistributionData(data)
      })


    },
    // 返回当前前n天的日期
    lastDayDate: function (AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;//获取当前月份的日期
      var d = dd.getDate();

      function tzero(n) {
        return n < 10 ? '0' + n : '' + n
      }

      return y + "-" + tzero(m) + "-" + tzero(d);
    },
    // 组织架构类型
    getOrganizationTypeData: function () {
      var self = this
      // 根据当前用户类型对应展示组织结构  A 集团、大区 、城市  B 大区 、城市  C 城市
      var tenantType = hlStorage.getUserMes('tenantType');
      if (tenantType === 'B') {
        $('.group').remove()
      }
      if (tenantType === 'C') {
        $('.group').remove()
        $('.district').remove()
      }

      $('.address-tab').on('click', 'li', function () {
        $(this).addClass('active').siblings().removeClass('active')
        var text = $(this).text()
		$('.address-tab-span').text(text)
        if (text === '集团') {
          hlhttp.get({
            url: 'sub_organizations',
            data: {pid: 0},
            success: function (data) {
              var html = ''
              if (data.length === 0) {
                hl.toast('暂无集团')
                return
              }
              data.map(function (item) {
                html += '<li data-type="' + item.type + '" data-value="' + item.shortName + '"data-id="' + item.id + '">' + item.shortName + '</li>'
              })
              $('#address-st').find('span').text('请选择')
              $('#address-st').find('ul').html(html)
              $($('#address-st').find('li')[0]).trigger('click')
            }
          })
        }

        if (text === '大区' && tenantType === 'A') {
          hlhttp.get({
            url: 'sub_organizations',
            data: {pid: 0},
            success: function (data) {
              hlhttp.get({
                url: 'sub_organizations',
                data: {pid: data[0].id},
                success: function (_data) {
                  var _html = ''
                  if (_data.length === 0) {
                    hl.toast('暂无大区')
                    return
                  }
                  _data.map(function (_item) {
                    if (_item.type === 'DQ') {
                      _html += '<li data-type="' + _item.type + '" data-value="' + _item.shortName + '"data-id="' + _item.id + '">' + _item.shortName + '</li>'
                    }
                  })
                  $('#address-st').find('span').text('请选择')
                  $('#address-st').find('ul').html(_html)
                }
              })
            }
          })
        }

        if (text === '大区' && tenantType === 'B') {
          hlhttp.get({
            url: 'sub_organizations',
            data: {pid: 0},
            success: function (data) {
              var html = ''
              if (data.length === 0) {
                hl.toast('暂无大区')
                return
              }

              data.map(function (item) {
                html += '<li data-type="' + item.type + '" data-value="' + item.shortName + '"data-id="' + item.id + '">' + item.shortName + '</li>'
              })
              $('#address-st').find('span').text('请选择')
              $('#address-st').find('ul').html(html)
              $($('#address-st').find('li')[0]).trigger('click')
            }
          })
        }

        if (text === '公司') {
          hlhttp.get({
            url: 'companys',
            success: function (data) {
              var html = ''
              if (data.length === 0) {
                hl.toast('暂无公司')
                return
              }
              data.map(function (item) {
                html += '<li data-type="CT" data-value="' + item.shortName + '"data-id="' + item.compayId + '">' + item.shortName + '</li>'
              })
              $('#address-st').find('span').text('请选择')
              $('#address-st').find('ul').html(html)

              if (tenantType === 'C') {
                $($('#address-st').find('li')[0]).trigger('click')
              }
            }
          })
        }
      })
      $($('.address-tab').find('li')[0]).trigger('click')
	  $('.address-tab-span').text($('.address-tab').find('li').eq(0).text())
    },
    // 物业面积构成饼图渲染
    propertyAreaComponentChart: function (data,color) {
      var self = this

      // 图表渲染
      ytChart = Highcharts.chart('yt-chart-container', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        colors: color,
        title: {
          text: ''
        },
        tooltip: {
			borderWidth: 0,
          headerFormat: '{series.name}<br>',
          pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
          pie: {
            enabled: true,
            cursor: 'pointer',
            borderWidth:1,
            dataLabels: {
              enabled: false,
              formatter: function () {
                // 当为车位时需要显示多少个车位
                if (this.key == '停车场') {
                  return '<span>' + this.key + ':</span>' + hlNumberUtil.formatNum(this.y) + 'm²(' + ytParkingNum + '个)'
                }
                return '<span>' + this.key + ':</span>' + hlNumberUtil.formatNum(this.y) + 'm²'
              }
            },
            size: '78%',
            showInLegend: true
          }
        },
        series: [{
          type: 'pie',
          innerSize: '60%',
          name: '业态类型占比',
          data: data
        }],
        legend: {
          enabled: true,
		  itemMarginBottom: 10,
        }
      })

    },
    // 物业面积分布渲染
    propertyAreaDistributionChart: function (data) {
      var self = this;
      // 图表渲染
      organizationChart = Highcharts.chart('organization-chart-container', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        colors: [
          '#FA83AB',
          '#F8D86A',
          '#7FC684',
          '#69C8FF',
          '#B6F8DA'
        ],
        title: {
          text: ''
        },
        tooltip: {
			borderWidth: 0,
          headerFormat: '{series.name}<br>',
          pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
          pie: {
			  center: [220, 110],
            enabled: true,
            cursor: 'pointer',
            borderWidth:2,
            dataLabels: {
              enabled: false,
			  padding: 10,
              formatter: function () {
                return '<span>' + this.key + ':</span>' + hlNumberUtil.formatNum(this.y) + 'm²'
              }
            },
            size: '85%',
			showInLegend: true
          }
        },
		legend: {
				
				itemMarginBottom: 5,
				
			},
        series: [{
          type: 'pie',
          innerSize: '60%',
          name: '物业面积业态类型占比',
          data: data
        }],
        credits: {
          enabled: false
        }
      })
    },
    // 待出租面积渲染
    waitRentChart: function (data) {
		
      var self = this
      rentChart = Highcharts.chart('wait-rent-chart', {
        chart: {
          type: 'column'
        },
        title: {
          text: '面积(m²)',
					align: 'left',
					x: 0,
					y: 6,
					style: {
						color: '#666',
						fontSize: '14px'
					}
        },
        xAxis: {
          type: 'category',
          categorys: [],
          min: 0,
          max: 8,
          tickLength: 0,
          tickInterval: 1,
          labels: {
            useHTML: true,
            formatter: function() {			
              var t= this.value && this.value.length > 12 ? this.value.substr(0,12) + '...' : isNaN(this.value) ? this.value : ' '
              return '<span style="width:75px;display:block;text-align:center;white-space:normal">' + t + '</span>';
            },
            overflow: 'justify',
            // rotation:90
          }
        },
        yAxis: {          
          title: {text: ''},
          gridLineColor: '#fff',
          lineWidth: 1,
          labels:{
            formatter:function () {
              return hlNumberUtil.formatNum(this.value)
            }
          }
        },
        scrollbar: {
          enabled: true
        },
        plotOptions: {
          series: {
            borderColor: '#7fdced',
            color: '#7fdced',
						borderWidth: 0,
									dataLabels: {
										enabled: true,
										userHTML: true,
										style: {"color": "#666", "fontSize": "11px", "fontWeight": "bold", "textOutline": "1px 1px contrast" },
										format: '{point.y:.2f}m²'
									}
          }
        },
        legend: {
          enabled: false
        },
        tooltip: {
					 enabled: false,
          backgroundColor: '#000',
          borderColor: '#000',		
          headerFormat: '<span style="font-size:13px;color:#fff;">{point.key}</span><br>',
          pointFormatter: function () {
			  var str = `				
				<div><span style="color:#a6d8f3;text:align:center;">${hlNumberUtil.formatNum(this.y)}</span><span style="color:#a6d8f3">m²</span></div>
			  `
            return str
          }
        },
        series: [{
          data: data,
          tooltip: {
            valueDecimals: 20
          },
        }],
        credits: {
          enabled: false
        }
      });
    },
    // 物业面积数据请求
    propertyAreaComponentData: function (date) {
      var self = this;

      hlhttp.get({
        url: 'report/acreage_by_unit_type',
        data: {date: date},
        success: function (data) {
          if (data.length === 0) {
            $('#yt-chart-container').empty()
            $('.js-yt-no-data').show()
            return
          }

          var dealData = [];
          var colorArr = []

          $('.js-yt-no-data').hide()
          data.map(function (item) {
            if (item.businessType === 'BG') {
              dealData.push([hlCodeConvert.businessType(item.businessType), Number(item.acreage)])
              colorArr.push('#A88EDA')
            }
            if (item.businessType === 'SP') {
              dealData.push([hlCodeConvert.businessType(item.businessType), Number(item.acreage)])
              colorArr.push('#7FC684')
            }
            if (item.businessType === 'ST') {
              ytParkingNum = item.count
              dealData.push([hlCodeConvert.businessType(item.businessType), Number(item.acreage)])
              colorArr.push('#69C8FF')
            }
            if (item.businessType === 'ETC') {
              dealData.push([hlCodeConvert.businessType(item.businessType), Number(item.acreage)])
              colorArr.push('#F8D86A')
            }
          })
          self.propertyAreaComponentChart(dealData,colorArr)
        }
      })
    },
    // 项目面积数据请求
    propertyAreaDistributionData: function (data) {
      var self = this;
      if (data === undefined)return

      hlhttp.get({
        url: 'report/acreage_distribution',
        data: data,
        success: function (data) {

          if (data.length === 0) {
            $('#organization-chart-container').empty()
            $('.js-pro-no-data').show()
            return
          }

          var dealData = []
          $('.js-pro-no-data').hide()
          data.map(function (item) {
            dealData.push([
              item.name, Number(item.acreage)
            ])
          })
          self.propertyAreaDistributionChart(dealData)
        }
      })
    },
    // 待出租面积数据请求
    waitRentData: function () {
      var self = this;
      hlhttp.get({
        url: 'report/project_rank_by_acreage',
        success: function (data) {
          if (data.length === 0) {
            $('#wait-rent-chart').empty()
            $('.js-wait-rent-no-data').show()
            return
          }

          var dealData = []
          $('.js-wait-rent-no-data').hide()
          data.map(function (item, index) {
			  // item.projectName, Number(item.acreage)
            dealData.push({
				name: item.projectName,
				x: index,
				y: Number(item.acreage)
			})
          })

          // var str = '';
          // var arr = [
          //   '',
          //   ' ',
          //   '  ',
          //   '   ',
          //   '    ',
          //   '     ',
          //   '      ',
          //   '       ',
          //   '        ',
          // ];
          // var len = 10 - dealData.length;
          // for (var i = 0; i < len; i++) {
          //   dealData.push([arr[i], null])
          // }
          self.waitRentChart(dealData)
          // if (dealData.length < 11)$('.highcharts-scrollbar').remove()

        }
      })
    }
  }

  propertyPortfolio.init()
}())
